<template>
<div>
    <div v-if="!isclock">
<div class="clockin" v-if="userinfo">
      <nav-bar name="每日打卡"></nav-bar>
      <div><img src="@/assets/clockin.png" alt=""></div>
      <div class="date">截止日期{{new Date().getFullYear()+'-'+new Date().getMonth()+'-'+new Date().getDate()}}
<van-cell-group>
  <van-field label="学号" :value="userinfo.Sno" readonly size="large" />
  <van-field label="姓名" :value="userinfo.name" readonly size="large"  />
  <van-field label-width="100"  v-model="text" label="居住地详细地址" size="large"/>
</van-cell-group>
      <van-checkbox  style="margin-bottom:12px"  v-model="checkeds[0]" checked-color="#ee0a24" icon-size="24px">今日体温是否正常</van-checkbox>
      <van-checkbox  style="margin-bottom:12px" v-model="checkeds[1]" checked-color="#ee0a24" icon-size="24px">14天内是否有有中高风险地区旅居史</van-checkbox>
      <van-checkbox  style="margin-bottom:12px" v-model="checkeds[2]" checked-color="#ee0a24" icon-size="24px">今日是否有与新冠肺炎感染有关症状</van-checkbox>
      <van-checkbox style="margin-bottom:12px" v-model="checkeds[3]" checked-color="#ee0a24" icon-size="24px">14天内是否接触有中高风险地区旅居史人</van-checkbox>

      </div>
  
  </div>
  <div class="button" @click="btnClick">打卡</div>
</div>
<div v-else>
     <h2>今日已打卡!!!</h2>
      <button @click="$router.push('/main')">退出</button> 
</div>
    </div>
      

      
</template>

<script>
import navBar from '@/components/navbar'
 
   export default {
       created() {
        this.$http.get('/userinfo',{
       params:{
       id:localStorage.getItem('id'),
       }}).then(res=>{
       console.log(res);
       this.userinfo=res.data.userInfo
     }) 
      this.$http.post('/gettable',JSON.stringify({
          id:localStorage.getItem('id')
      })).then(res=>{
         console.log(res);
         if(res.data.code==0){
             this.isclock=true
         }
      })
       },
       components:{
           navBar
       },
   data() {
    return {
         checkeds:[false,false,false,false],
         text:'',
         userinfo:null,
         isclock:false
    }
 
  },
  methods: {
      btnClick(){
        if(this.text.length==0){
            this.$msg.fail('请填写详细居住地！')
        }
        else{
           this.$Dialog.confirm({
  title: '确定打卡',
  message: '你是否确定自身情况进行打卡？',
})
  .then(() => {
       this.$http.post('/table',JSON.stringify({text:this.text,checkeds:this.checkeds,id:localStorage.getItem('id')})).
       then(res=>{
          console.log(res);
       })
       this.$router.push('/main')
  })
  .catch(() => {
    // on cancel
  });
        }
      }
  },
  
  }
</script>
<style scoped>
   
 .clockin{
     background-color: white;
 }
 img {
     width: 100%;
 }
 .date {
     background-color: white;
color: rgb(200,200,200);
text-align: right;
 }
 .button{
     width:50%;
     margin: 50px auto;
     height: 50px;
     background-color: rgb(119,223,176);
     color: white;
     text-align: center;
     line-height: 50px;
     border-radius: 10px;
 }
</style>